<template>
  <div class="common-warp wh100 warp-bg">
    <div class="noo">
      <a-card title="设备信息">
        <!-- <template #extra><a href="#">more</a></template> -->
        <a-form ref="formRef" :model="state.form" :rules="rules">
          <a-form-item label="设备名称" name="name">
            <a-input v-model:value="state.form.name" />
          </a-form-item>
          <a-form-item label="设备序列号" name="code">
            <a-input v-model:value="state.form.code" />
          </a-form-item>
          <a-form-item label="设备型号" name="protoType">
            <a-select ref="select" v-model:value="state.form.protoType">
              <!-- <a-select-option :value="1">德服</a-select-option>
              <a-select-option :value="2">宇视</a-select-option> -->
              <a-select-option :value="3">nFace128</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
    <a-button type="primary" block @click="confirm(formRef)">提交</a-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useAccessDeviceCreateApi } from "@/api/index";
import { message } from "ant-design-vue";

const router = useRouter();
const formRef = ref();

const rules = {
  name: [{ required: true, message: "请输入设备名称", trigger: "change" }],
  code: [{ required: true, message: "请输入设备序列号", trigger: "change" }],
  protoType: [{ required: true, message: "请选择设备厂商", trigger: "change" }],
};

const useContent = () => {
  return {
    code: "",
    name: "",
    protoType: 3,
  };
};

const state = reactive({
  form: useContent(),
});

//提交
const confirm = (formRef: any) => {
  if (!formRef) return;
  formRef.validate().then(async () => {
    await useAccessDeviceCreateApi(state.form);
    message.success("操作成功", 2);
    setTimeout(() => {
      router.push({ name: "AccessDev" });
    }, 2300);
  });
};

onMounted(() => {
  document.title = "新增";
});
</script>
<style scoped lang="less">
.noo {
  height: calc(100vh - 56px);
  overflow-y: scroll;

  :deep(.ant-form-item-label) {
    padding: 0 !important;
  }

  :deep(.ant-card-body) {
    padding: 12px !important;
  }

  :deep(.ant-card-head) {
    padding: 12px !important;
  }

  :deep(.ant-form-item) {
    margin-bottom: 12px !important;
  }
}
</style>
